<template>
  <!-- 模块容器 -->
  <div class="chart-box-vessel global-slide-up-animation">
    <div class="title-name-box">
      <div class="title-box">
        <span class="title">{{ title }}</span>
      </div>
    </div>
    <div class="public-module-box-vessel">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    /** 标题 */
    title: { type: String, required: true },
  });
  defineSlots<{
    default: () => void;
  }>();
</script>

<style lang="scss" scoped>
  .chart-box-vessel {
    flex: 1;
    min-width: max(360px, 24%);
    margin-right: $app-page-padding;
    margin-bottom: $app-page-padding;

    .title-name-box {
      @include flex(row, nowrap, space-between, center, center);
      width: 100%;
      padding: 5px 0;
      text-align: center;

      .title-box {
        @include flex(column, nowrap, center, flex-start, center);
        flex: 1;
        min-height: calc(var(--my-change-base12-2x-size) + 30px);
        padding: 5px;

        .title {
          font-size: calc(var(--my-change-base12-2x-size) + 2px);
          font-weight: bolder;
          color: var(--el-text-color-regular);
        }
      }
    }

    .public-module-box-vessel {
      height: 260px;
      padding: 10px;
      background: $c-bg-block;
      border-radius: 10px;
      box-shadow: var(--my-box-shadow-fill);
    }
  }
</style>
